<template>
	<view class="swiper_box">
		<uni-swiper-dot :info="swiperImg" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular"  @change="change">
				<swiper-item v-for="(item, index) in swiperImg" :key="index" class="swiperItem" @click="swiper(index)">
					<image :src="item.homeUrl" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	import config from '@/common/js/config.js'
	export default {
		components:{
			uniSwiperDot
		},
		/* 接收父组件传递过来的值 */
		props: {
			swiperImg: {
				type: Array,
				default() {
					return []
				}
			},
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true,
				info: [],
				current: 0,
				mode: 'round',
				dotsStyles:{
					height:6,
					width:6,
					color: "#fff",
					backgroundColor:'rgba(255, 255, 255, .6)',
					bottom:30,
					selectedBackgroundColor:'rgba(43, 153, 215, .8)',
					selectedBorder:'rgba(43, 153, 215, .8)'
				}
			}
		},
		methods: {
			
			swiper (index){
				this.$emit('click', this.swiperImg[index]);
			},
			 change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper_box{
		// margin-top: 70rpx;
		// border: 1px solid red;
		
		.swiper{
			height: 440rpx !important;
			width: 100%;
			/* #ifdef H5 */
			padding: 0 25rpx !important;
			/* #endif */
			.swiperItem{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				
				margin: 40rpx auto 0rpx;
				
				/* #ifndef H5 */
				margin: 20rpx auto 0rpx;
				/* #endif */
				
				
				image{
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
					
				}
			}
		}
	}
		
		
</style>
